import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { DatePipe } from '@angular/common';
import { LocalStorage } from '@core/local.storage';
import { ZhpdService } from './zhpd.service';
declare const echarts: any;

@Component({
  selector: 'app-zhpdtj',
  templateUrl: './zhpdtj.component.html',
  styleUrls: ['./zhpdtj.less']
})

export class ZhpdtjComponent implements OnInit {

  userInfo = JSON.parse(this.ls.get('loginInfo'));
  queryParam: any = {};

  constructor(
    private datePipe: DatePipe,
    public ls: LocalStorage,
    private zhpdService: ZhpdService
  ) { }


  ngOnInit(): void {
    this.initCmp();
    this.query();
  }

  initCmp() {
    this.initDate();
  }

  initCharts() {

  }


  initDate() {
    const _date = new Date();
    _date.setDate(_date.getDate() - 7);
    this.queryParam._startdate = _date;
    this.queryParam._enddate = new Date();
  }


  /**
   * 删除私立字段
   * @param param
   */
  removePrivateFields(param) {
    Object.keys(param).forEach(key => {
      if (key.indexOf('_') == 0) {
        delete param[key];
      }
    });
  }

  formatDate(param) {
    if (param._startdate) {
      param.startdate = this.datePipe.transform(param._startdate, 'yyyy-MM-dd');
    }
    if (param._enddate) {
      param.enddate = this.datePipe.transform(param._enddate, 'yyyy-MM-dd');
    }
  }

  /**
   * 删除null字段
   * @param param
   */
  removeUselessFields(param) {
    Object.keys(param).forEach(key => {
      if (!param[key]) {
        delete param[key];
      }
    });
  }



  query() {
    const param: any = {};
    Object.assign(param, this.queryParam);
    this.formatDate(param);
    this.removePrivateFields(param);
    this.removeUselessFields(param);

    const param_yjk = {
      status: "亚健康",
    };
    const param_gz = {
      status: "故障",
    };

    Object.assign(param_yjk, param);
    Object.assign(param_gz, param);
    this.getChartDataByDevtype(param_yjk, (chartData) => {
      this.initChart('fb_yjk', '亚健康设备分布情况', 'pie', this.formatChartData('pie', chartData));
    });
    this.getChartDataByDevtype(param_gz, (chartData) => {
      this.initChart('fb_gz', '故障设备分布情况', 'pie', this.formatChartData('pie', chartData));
    });


    this.getChartDataByTime(param_yjk, (chartData) => {
      this.initChart('qs_yjk', '亚健康设备趋势', 'line', this.formatChartData('line', chartData));
    });
    this.getChartDataByTime(param_gz, (chartData) => {
      this.initChart('qs_gz', '故障设备趋势', 'line', this.formatChartData('line', chartData));
    });

  }

  getChartDataByDevtype(param, func) {
    this.zhpdService.getTjInfoByDevtype(param).subscribe(res => {
      if (res && res.data && res.data.length) {
        const chartData = res.data[0];
        func(chartData);
      }
    });
  }
  getChartDataByTime(param, func) {
    this.zhpdService.getTjInfoByTime(param).subscribe(res => {
      if (res && res.data && res.data.length) {
        const chartData = res.data[0];
        func(chartData);
      }
    });
  }

  formatChartData(type, chartData) {
    let formatRes = null;
    switch (type) {
      case 'pie':
        formatRes = chartData.map(el => {
          return {
            name: el.DEVTYPENAME,
            value: el.C,
          }
        });
        break;
      case 'bar':
      case 'line':
        formatRes = {
          names: [],
          values: [],
        }
        chartData.forEach(el => {
          formatRes.names.push(el.D);
          formatRes.values.push(el.C);
        });
        break;

      default:
        break;
    }
    return formatRes;
  }

  initChart(id, title, chartType, seriesData) {
    let config = {};
    const pieCfg = {
      title: {
        text: title,
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          type: chartType,
          radius: '55%',
          center: ['50%', '50%'],
          label: {
            normal: {
              formatter: '{b} {c} ({d}%)'
            }
          },
          data: seriesData,
        }
      ]
    };
    const barCfg = {
      title: {
        text: title,
        x: 'center'
      },
      // color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b} {a} {c}%'
      },
      xAxis: [
        {
          type: 'category',
          data: seriesData.names,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          type: chartType,
          data: seriesData.values
        }
      ]
    }
    switch (chartType) {
      case 'pie':
        config = pieCfg;
        break;
      case 'bar':
      case 'line':
        config = barCfg;
        break;

      default:
        break;
    }
    echarts.init(document.getElementById(id)).setOption(config, true);
  }

}
